<template>
    <div class="assetsReceive">
        <!-- 左边类别菜单 -->
        <tree-model ref='treeModel' :treeModelMes="treeModelMes"  @treeModelFn='treeModelFn' :defaultIds='defaultIds' class="ClassTree"></tree-model>
        <!-- 右边内容 -->
        <div class="contentRight">
            <!-- 右边头部 -->
            <div class="header">
                 <div class="warehouses" v-show="allWarehouses&&allWarehouses.length>1">
                     <span>请选择仓库：</span> 
                     <el-select @change="getAssetsTreeFn" v-model="warehouses" placeholder="请选择仓库" class="selectClass">
                        <el-option   v-for="item in allWarehouses"  :key="item.wh_id"  :label="item.wh_name" :value="item.wh_id"></el-option>
                     </el-select>
                </div>
                <div class="getIt">
                    <div class="headerTitle">    
                        <i class="el-icon-s-order" style="font-size:12px;color: #bbbbbb"></i>
                        领用单：共  <span style="color:rgba(255, 47, 47, 1);font-size: 12px;">{{recieveList.length}} </span> 件 价值：￥<span style="color:rgba(255, 47, 47, 1);font-size: 12px;">{{ f_unit_price_list }}</span>元
                    </div>
                    <el-button  plain  :type="recieveList.length>0? 'primary': '' " @click="goFn(0)" :disabled="recieveList.length==0">领用</el-button>
                    <el-button  plain @click="empty">清空</el-button>
                </div>
            </div>
            <!-- 右边主体 -->
            <div class="rightContent" ref="rightContent"  @scroll="getScoll($event)"> 
                <div class="assetsAcqNo"  v-if='assetsList.length==0'>
                    <img :src="listNo">
                    <div>暂无数据，请等待管理员添加资产</div>
                </div>
                <item-card v-else v-for="(item,index) in assetsList" :key="index" :item='item' :defaultProp="defaultProp" >
                    <el-button style="margin-top:8px;" @click="item.disabled=!item.disabled;addToList(item)" :class="{'base':true,'able':!item.disabled,'disabled':item.disabled,}">{{item.disabled?'已加入领用单':'加入领用单'}}</el-button>
                </item-card>
            </div>
        </div>
    </div>
</template>
<script>
/* eslint-disable */ 
import { getReceiveList } from './api'
import {getMyAssetWarehouse,getCategoryByWarehouse}  from '@/api'
import TreeModel from "@/components/TreeModel"
import itemCard from "@/components/itemCard"
export default {
    name: "assetsReceive",
    components:{
        TreeModel,itemCard
    },
    data() {
        return{
            dept_ids:'',
            defaultProp:['image_url','f_name','f_code','f_specs','f_unit_price'],
            warehouses:'',/**仓库 */
            allWarehouses:[],/*我的全部仓库*/
            listNo: require("@/assets/images/nohas.png"),/**类别下无数据时展示图 */
            assetsNo:require("@/assets/images/assets-no.png"),
            recieveList:[],/*领用单*/
            treeModelMes:{
                treeModelData:[],
                defaultProps: { children: 'cate',label: 'category_name'}
            },/*treeModel数据*/
            assetsList: [],/*资产列表*/
            defaultIds:[],/**默认展开的id */
            value: '',
        }
    },
    computed: {
      f_unit_price_list() {
         let totalPrice = 0
         this.recieveList.forEach(item=>{
			 //console.log(item)
             return totalPrice += parseFloat(item.f_unit_price)
		 })
		 return totalPrice
      }
    },
    created(){
        let dept_ids = this.$store.state.users.department.map(item=>{return item.dept_id}).join(',')
        this.dept_ids = dept_ids
        getMyAssetWarehouse({dept_ids}).then(res=>{
            this.allWarehouses = res.data
            this.warehouses = res.num>0?res.data[0].wh_id:''
            res.num>0?this.getAssetsTreeFn():''
        })
    },
    methods: {
        //滑到底部，加载更多
        getScoll(){
            // if(e.target.scrollHeight-e.target.scrollTop-e.target.clientHeight==0){
            //     for(let i=0;i<20;i++){
            //         this.assetsList.push(
            //             {additionalConfiguration: "",amountaOfMoney: 10000,assetClass: "幕布",assetName: "憨憨",assetStatus: "闲置",assetsEncoding: "20191206-9606",
            //             brand: "1",assetCategoryId: 15,channel: "111111111",comId: "1113347547247685633",deleteDateTime: null,deleteStatus: 0,departmentId: "",id: "1202764250364829698",
            //             img: "",leadTime: null,modelNumber: "1111111",overGuaranteedTime: "2019-12-31",purchaseTime: "2019-12-31",remarks: "",serviceLife: 100,siteOfUse: "",siteOfUseId: 0,
            //             source: "自产",staId: 2,unitOfMeasurement: "1",useDepartment: "",userId: "",userName: "",warehousingTime: "2019-12-31",warrantyStart: "2019-12-01",disabled:true}
            //         )
            //     }
                
            // }
        },
        /**清空 */
        empty(){
            this.recieveList = []
            this.$store.commit('changeCollarUse',[]);
            this.assetsList.forEach(ele=>{
                ele.disabled = false
            })
        },
        /**跳转领用页面 */
        goFn(){
            this.$store.commit('changeCollarUse',this.recieveList)
            this.$router.push({path:`/collarUse`,query:{ param: this.$route.meta.title,dept_ids:this.dept_ids,warehouses:this.warehouses}})
        },
        /** 添加到领用单*/
        addToList(item){
            if(item.disabled) return this.recieveList.push(item)
            let idx 
            this.recieveList.forEach((ele,index)=>{
                if(ele.re_a_id==item.re_a_id)idx=index
            })
            this.recieveList.splice(idx,1)
        },
        /*获取资产类别树*/
        getAssetsTreeFn(){
            getCategoryByWarehouse({category_type:2,wh_id:this.warehouses}).then(res=>{
                this.treeModelMes.treeModelData = res
                if(!(res.length&&res[0].cate&&res[0].cate.length)){
                    this.assetsList = []
                }
                res.length&&res[0].cate&&res[0].cate.length?this.defaultIds = [res[0].cate[0].id]:''
                //console.log(res)
            })
        },
        /*通过点击资产树来获取资产列表*/
        treeModelFn(val){
            if(val.pid==0) return
            this.assetsList = []
            const param = { c_cid: val.id,wh_id:this.warehouses}
            getReceiveList(param).then((res)=>{
                if(res&&res.length){
                    res.forEach(element => {
                        element.disabled = false
                        if(this.recieveList&&this.recieveList.length){
                            this.recieveList.forEach(item=>{
                                item.re_a_id==element.re_a_id?element.disabled=true:''
                            })
                        }
                    })
                    this.assetsList = res
                }
            })
        },
    }
}
</script>

<style lang="stylus" scoped>
.assetsReceive
    height 100%
    width 100%
    display flex
    .ClassTree
        width 175px
        margin-right 10px
    .contentRight
        flex 1
        background-color #fff
        padding 20px
        display flex
        flex-direction column
        .header
            display flex
            flex-wrap wrap
            align-items center
            min-height 60px
            width: 99%;
            background-color rgba(243, 246, 249, 1)
            justify-content space-between
            margin 2px 0 15px 0
           @media screen and (max-width: 1500px)
                .selectClass
                    width 160px
                    height 30px
            @media screen and (min-width: 1500px)
                .selectClass
                    width 200px
                    height 30px
            .headerTitle
                color: #606266;
                font-size: 12px;
                margin-right 20px
                min-width 186px
            .warehouses
                color: rgba(96, 97, 102, 1)
                font-size: 14px;
                display flex
                align-items center
                span
                   margin 0 3px 0 23px
                   color rgba(96, 98, 102, 1)
                >>> .el-input__inner
                    padding 4px 15px 0 !important
                    height: 30px;
            .getIt
                flex 1
                display flex
                align-items center
                margin-left 7px
                padding 8px 10px 6px 10px
                >>> .el-button
                    padding 3px
                    width: 65px;
                    height: 30px;
        .assetsAcqNo
            display flex
            flex-direction column
            justify-content center
            align-items center
            >img 
                margin 50px 0 30px 0
        .rightContent
            flex 1
            overflow-y auto
            .base
                width: 90px;
                height: 25px;
                line-height : 7px;
                padding 5px
                box-sizing border-box
                border-radius: 4px;
                font-size: 12px;
                text-align: center;
                font-family: Microsoft Yahei;
            .able
                background-color: rgba(255, 255, 255, 0);
                color: rgba(10, 142, 255, 1);
                border: 1px solid rgba(10, 142, 255, 1);
            .disabled
                background-color: rgba(255, 255, 255, 0);
                color: rgba(255, 47, 47, 1);
                border: 1px solid rgba(255, 47, 47, 1);
                padding 0

</style>